<template>
    <el-card shadow="always">
        <div class="navList">
            <div class="navItem">
                <div class="navText active">资源</div>
            </div>
            <div class="navItem">
                <div class="navText">视频课</div>
            </div>
            <div class="navItem">
                <div class="navText">直播课</div>
            </div>
        </div>
    </el-card>
    <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top:10px">
        <!-- <div class="searchContainer">
            <div class="searchInput">
                <input type="text" />
                <i></i>
                <button>搜索</button>
            </div>
        </div> -->
        <div class="">
            <div class="">
                <div style="width: 270px;height:40px;background:#F5F7F9;float:left;border:1px solid #ccc;">
                    <svg style="margin:10px 5px 0 10px;" t="1666106292294" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2550" width="14" height="14">
                        <path
                            d="M448 768c176.725333 0 320-143.274667 320-320 0-176.725333-143.274667-320-320-320-176.725333 0-320 143.274667-320 320 0 176.725333 143.274667 320 320 320z m0 42.666667c-200.298667 0-362.666667-162.368-362.666667-362.666667S247.701333 85.333333 448 85.333333s362.666667 162.368 362.666667 362.666667-162.368 362.666667-362.666667 362.666667z m304.917333-27.584a21.333333 21.333333 0 0 1 30.165334-30.165334l150.848 150.848a21.333333 21.333333 0 0 1-30.165334 30.165334l-150.848-150.826667z"
                            fill="#3D3D3D" p-id="2551"></path>
                    </svg>
                    <input type="text" style="border: none;outline: none;background:#F5F7F9;height:90%;"/>
                </div>
                <button style="float:left;height:40px;width:60px;margin-left:10px;background:#F5F7F9;color:#7d8090;border:none;">搜索</button>
            </div>
        </div>

    </el-card>


</template>

<script setup lang="ts">
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'
</script>

<style scoped>
.navList {
    display: flex;
}

.navList .navItem {
    padding: 0 30px;
    color: #111;
    font-size: 14px;
}

.navList .navItem .navText {
    border-bottom: 5px solid #fff;
    height: 77px;
    line-height: 77px;
}

.navList .navItem .navText:hover {
    border-bottom: 5px solid #F93684;
}

.navList .navItem .active {
    border-bottom: 5px solid #F93684;
}

.searchContainer {}

.searchContainer .searchInput {
    width: 100%;
}

.searchContainer .searchInput input {
    width: 270px;
    height: 35px;
    outline: none;
    border: 1px solid #EAECF0;
    border-radius: 4px;
    background: #f5f7f9;
}

.searchContainer .searchInput button {
    background: #f5f7f9;
    border-radius: 4px;
    color: #7d8090;
    font-size: 14px;
    display: inline-block;
    padding: 10px 17px;
    margin-left: 10px;
    cursor: pointer;
    border: none;
}
</style>